﻿<Window x:Class="Bing.Image.ImageWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Bing="clr-namespace:Bing;assembly=Bing"
    xmlns:Convertors="clr-namespace:Bing.Image.Converters"
    xmlns:Controls="clr-namespace:Bing.Controls;assembly=Bing.Controls"
    Title="BingImage with Bing#" 
        Icon="/Bing.Image;component/Images/find.png" 
        Height="698" Width="748" 
        MinWidth="690" MinHeight="700">
    <Window.Resources>

        <!-- Data converters for complex fields -->
        <Convertors:PhotoSizeConverter x:Key="converterPhotoSize" />
        
        <Style TargetType="{x:Type Label}">
            <Setter Property="Margin" Value="3" />
        </Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Margin" Value="3" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        
        <Style TargetType="{x:Type TextBox}" >
            <Setter Property="Margin" Value="3" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border Background="{TemplateBinding Background}" 
                            x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="5">
                            <ScrollViewer x:Name="PART_ContentHost"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Photo Template -->
        <DataTemplate DataType="{x:Type Bing:ImageResult}">
            <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Margin="6">
                <!-- Drop Shadow -->
                <Border HorizontalAlignment="Stretch" 
                        VerticalAlignment="Stretch" 
                        CornerRadius="4" 
                        Background="#44000000">
                    <Border.RenderTransform>
                        <TranslateTransform X="5" Y="5" />
                    </Border.RenderTransform>
                    <Border.BitmapEffect>
                        <BlurBitmapEffect Radius="8" />
                    </Border.BitmapEffect>
                </Border>
                <!-- Image Template -->
                <Border Padding="4" Background="White" BorderBrush="#22000000" BorderThickness="1">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0" Source="{Binding Thumbnail.Url}"/>
                        <Label Grid.Row="1" Content="{Binding Title}" ToolTip="{Binding Title}" />
                    </Grid>
                </Border>
            </Grid>
        </DataTemplate>
        
        <!-- Main photo catalog view -->
        <Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBox}" >
                        <WrapPanel Margin="5" IsItemsHost="True" Orientation="Horizontal" 
                       ItemHeight="{Binding ElementName=ZoomSlider, Path='Value'}" 
                       ItemWidth="{Binding ElementName=ZoomSlider, Path='Value'}" 
                       VerticalAlignment="Top" HorizontalAlignment="Stretch" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Removes dotted rectangle focus -->
        <Style TargetType="{x:Type ItemsControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ItemsControl}" >
                        <WrapPanel IsItemsHost="True" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Style for an individual generic item -->
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}" >
                        <Border SnapsToDevicePixels="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#445B6249"   />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Label Margin="12,12,0,0" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Width="63">App Id :</Label>
        <TextBox x:Name="txtAppId" Margin="81,12,197,0" Height="23" VerticalAlignment="Top">
            7EC9949296748CD8737FFF69FC74B3697D16DCEB
        </TextBox>
        <Label Height="23" HorizontalAlignment="Right" Margin="0,12,144,0" Name="label1" VerticalAlignment="Top" Width="47">Count</Label>
        <TextBox Height="23" Margin="0,12,12,0" Name="txtPageCount" VerticalAlignment="Top" Text="10" HorizontalAlignment="Right" Width="126" />
        <Image x:Name="imgWordGood" DockPanel.Dock="Right" Width="24" Height="24" VerticalAlignment="Bottom" Margin="12,0,0,11" HorizontalAlignment="Left"></Image>
        <Controls:SearchTextBox x:Name="txtSearch"
            Search="searchTextBox_Search" 
            Height="23" Margin="81,41,12,0" 
            VerticalAlignment="Top" 
            LabelText="Search the web with Bing"
            SearchMode="Delayed" />
        <GroupBox Header="Options"  HorizontalAlignment="Left" Margin="12,70,0,40" Name="grpOptions" Width="160">
            <Grid>
                <Expander Header="Size"  Margin="10,6,6,0" Name="expSize" IsExpanded="True" Height="160" VerticalAlignment="Top" ExpandDirection="Down">
                    <Grid >
                        <RadioButton Height="16" Margin="6,6,6,0" Name="optSizeSmall" VerticalAlignment="Top" IsChecked="True">Small</RadioButton>
                        <RadioButton Height="16" Margin="6,28,6,0" Name="optSizeMedium" VerticalAlignment="Top" IsChecked="True">Medium</RadioButton>
                        <RadioButton Margin="6,50,6,0" Name="optSizeLarge" Height="19" VerticalAlignment="Top" IsChecked="True">Large</RadioButton>
                        <CheckBox Margin="6,75,0,0" Name="chkSizeHeight" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="54">Height</CheckBox>
                        <TextBox Height="23" Margin="64,70.723,6,0" Name="txtSizeHeight" VerticalAlignment="Top" IsEnabled="{Binding Path=IsChecked, ElementName=chkSizeHeight, Mode=Default}" />
                        <CheckBox Margin="6,103,0,0" Name="chkSizeWidth" Height="20" VerticalAlignment="Top" HorizontalAlignment="Left" Width="54">Width</CheckBox>
                        <TextBox Height="23" Margin="64,99.723,6,0" Name="txtSizeWidth" VerticalAlignment="Top" IsEnabled="{Binding Path=IsChecked, ElementName=chkSizeWidth, Mode=Default}"/>
                    </Grid>
                </Expander>
                <Expander Header="Aspect" Margin="9,172,7,0" Name="expAspect" IsExpanded="True" Height="94" VerticalAlignment="Top">
                    <Grid>
                        <RadioButton Height="16" Margin="6,6,10,0" Name="optAspectSquare" VerticalAlignment="Top" IsChecked="False">Square</RadioButton>
                        <RadioButton Margin="6,28,10,27" Name="optAspectWide" IsChecked="False">Wide</RadioButton>
                        <RadioButton Height="16" Margin="6,0,10,5" Name="optAspectTall" VerticalAlignment="Bottom" IsChecked="False">Tall</RadioButton>
                    </Grid>
                </Expander>
                <Expander Header="Color" Margin="8,272,8,0" Name="expColor" IsExpanded="True" Height="70" VerticalAlignment="Top">
                    <Grid>
                        <RadioButton Margin="6,6,3,0" Name="optColorColor" Height="16" VerticalAlignment="Top" IsChecked="True">Color</RadioButton>
                        <RadioButton Margin="6,28,3,0" Name="optColorMonochrome" Height="18" VerticalAlignment="Top" IsChecked="False">Black &amp; White</RadioButton>
                    </Grid>
                </Expander>
                <Expander Header="Style" Height="75" Margin="9,347.723,6,0" Name="expStyle" VerticalAlignment="Top" IsExpanded="True">
                    <Grid>
                        <RadioButton Margin="6,8,5,0" Name="optStylePhoto" Height="16" VerticalAlignment="Top" IsChecked="False">Photograph</RadioButton>
                        <RadioButton Margin="6,30,6,0" Name="optStyleGraphics" Height="16" VerticalAlignment="Top" IsChecked="False">Illustration</RadioButton>
                    </Grid>
                </Expander>
                <Expander Header="Face" Margin="8,427.723,8,0" Name="expFace" Height="98" VerticalAlignment="Top" IsExpanded="True">
                    <Grid>
                        <RadioButton Height="16" Margin="6,9,10,0" Name="optFaceFace" VerticalAlignment="Top" IsChecked="False">Face</RadioButton>
                        <RadioButton Margin="6,31,10,0" Name="optFacePortrait" Height="17" VerticalAlignment="Top" IsChecked="False">Head &amp; Shoulders</RadioButton>
                        <RadioButton Margin="6,54,11,0" Name="optFaceOther" Height="16" VerticalAlignment="Top" IsChecked="False">Other</RadioButton>
                    </Grid>
                </Expander>
            </Grid>
        </GroupBox>
        <GroupBox Header="Results" 
                  Margin="178,70,12,40" 
                  x:Name="gpResults"
                  DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=ImageResults}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                
                <!-- Results -->
                <ScrollViewer VerticalScrollBarVisibility="Auto" 
                              HorizontalScrollBarVisibility="Disabled"  
                              DockPanel.Dock="Top" 
                              ScrollChanged="scrollViewerScrollChanged"
                              Grid.Row="0" Grid.Column="0">
                    <ListBox 
                      IsSynchronizedWithCurrentItem="True"
                      Name="lbResults" 
                      Style="{StaticResource PhotoListBoxStyle}" 
                      Margin="5" 
                      SelectionMode="Extended" 
                      ItemsSource="{Binding}" 
                      SelectedIndex="0">
                    </ListBox>
                </ScrollViewer>

                <!-- Image Properties -->
                <GroupBox Header="Image Properties" 
                          Name="grpImageProperties" 
                          DockPanel.Dock="Bottom" 
                          Grid.Row="1" Grid.Column="0">
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.ColumnSpan="3" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Label Content="{Binding Path=Title}" />
                            <TextBlock Margin="5">
                                <Hyperlink NavigateUri="{Binding Path=MediaUrl}" Click="hyperlink_Click"    >
                                    <TextBlock Text="{Binding Path=DisplayUrl}" />
                                </Hyperlink>
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Grid.Column="0" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock>
                                <Label>Content Type: </Label>
                                <Label Content="{Binding Path=Thumbnail.ContentType}" />
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock>
                                <Label>Dimensions: </Label>
                                <Label>
                                    <Label.Content>
                                        <MultiBinding Converter="{StaticResource converterPhotoSize}">
                                            <Binding Path="Thumbnail.Width" />
                                            <Binding Path="Thumbnail.Height" />
                                        </MultiBinding>
                                    </Label.Content>
                                </Label>
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <TextBlock>
                                <Label>File Size: </Label>
                                <Label Content="{Binding Path=FileSize}" />
                            </TextBlock>
                        </StackPanel>
                    </Grid>
                </GroupBox>
                
                <!-- Zoom Control -->
                <DockPanel DockPanel.Dock="Bottom" Margin="5"
                           Grid.Row="2" Grid.Column="0">
                    <Label DockPanel.Dock="Left">Zoom:</Label>
                    <Slider Name="ZoomSlider" 
                            Margin="10,0,0,0" 
                            Orientation="Horizontal" 
                            Minimum="80" 
                            Maximum="320" 
                            Value="160" 
                            TickFrequency="80"
                            TickPlacement="BottomRight" 
                            SmallChange="5"
                            LargeChange="20" />
                </DockPanel>
            </Grid>
        </GroupBox>
        <Image Height="23" HorizontalAlignment="Left" Margin="12,41,0,0" Name="imgBingLogo" Stretch="Fill" VerticalAlignment="Top" Width="63" />
        <Label Height="23" Margin="42,0,18,11" Name="lblStatus" VerticalAlignment="Bottom" VerticalContentAlignment="Center"></Label>
        
    </Grid>
</Window>